<template>
	<view class="container">
		<view @click="toBack" class="goBack flex justify-center align-center round">
			<view class="cuIcon-back lg text-white"></view>
		</view>
		<image :src="info.coverImg" mode="" class="width-sub" style="height: 500rpx;"></image>
		<view class="width-sub bg-F4F4F4 position-relative" style="border-radius: 34px 40px 0px 0px;padding: 50rpx 30rpx;margin-top: -56rpx;z-index: 1;">
			<view class="text-xl text-bold text-333">
				{{info.title}}
			</view>
			<view class="text-sm text-999 margin-top-sm">
				{{info.typeName}}
			</view>
			<view class="flex justify-between align-center">
				<view class="color">
					<text class="text-sm">¥</text><text class="text-23">{{parseFloat(info.courseFee/100).toFixed(2)}}</text>
				</view>
				<view class="text-sm text-999">
					<text>已报名 {{info.downNum}}</text><text class="margin-left-xs">浏览 {{info.readNum}}</text>
				</view>
			</view>
		</view>
		<view class="bg-white" style="padding: 54rpx 30rpx 140rpx;border-radius: 34rpx 40rpx 0px 0px;">
			<hui-parser :html="info.detailHtml" />
		</view>
		<view class="round flex justify-between align-center a-fooder text-white">
			<view class="">
				<text class="text-sm">¥</text><text class="text-20 text-bold">{{parseFloat(info.price/100).toFixed(2)}}</text><text class="text-xs margin-left-xs">报名费</text>
			</view>
			<button @click="toPage('/filePage/pages/apply/apply?id=' + id)" class="bg-color text-15 round text-white text-bold flex justify-center align-center margin-right-xs" style="width: 268rpx;height: 82rpx;">立即报名</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
					baseUrl: this.$config.baseUrl,
					id:'',
					info:{}
			};
		},
		onLoad(options) {
			if(options.id) this.id = options.id
			this.getInfo()
		},
		methods:{
			toBack() {
				uni.navigateBack()
			},
			toPage(url){
				this.$util.openNewPage(url)
				},
			async getInfo() {
				const [err, res] = await this.$get(this.$api.training_details, {
						id: this.id
					})
				if (res) {
					this.info = res.data
					// console.log(res.data)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.goBack {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		top: 50rpx;
		left: 20rpx;
		z-index: 2;
		background: rgba(0, 0, 0, .5);
	}
	.a-fooder{
		height: 102rpx;
		position: fixed;
		left: 20rpx;
		right: 20rpx;
		bottom: 30rpx;
		background: #343434;
		padding-left: 50rpx;
	}
</style>
